<style>
.con {
  margin-top: 50px;
  /* display: flex;
    justify-content: space-between;
    align-items: center; */

}
</style>
<template>
  <div class="con">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-col :span="8">
        <el-form-item label="货号" prop="productNo">
          <el-input v-model="form.productNo" placeholder="请输入货号" :disabled="true" />
        </el-form-item>
        <el-form-item label="图片" prop="picUrl">
          <template #default="scope">
            <el-popover effect="light" trigger="click" placement="right" width="auto">
              <template #default>
                <img :src='pjtUrl + form.picUrl' style="object-fit: contain;width: 600px;height: 500px;">
              </template>
              <template #reference>
                <img :src='pjtUrl + form.picUrl' style="object-fit: contain;width: 100px; height: 100px" />
              </template>
            </el-popover>
          </template>
        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 v-show="scope.row.picUrl"-->
        <!-- <el-form-item label="图片地址" prop="picUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                    :on-exceed="handleExceed" :on-success="handlePictureSuccessPic" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                                                                                                                            :on-preview="handlePictureCardPreview" :file-list="files">
                                                                                                                                                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                                                                                                                                                    </el-upload>
                                                                                                                                                                                                                                                                                                                            <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                                                                                        <img width="100%" v-if="picUrl" :src="picUrl" alt="">
                                                                                                                                                                                                                                                    </el-dialog>
                                                                                                                                                                                                                                                </el-form-item> -->
        <!-- <el-form-item label="颜色属性" prop="colorProperty">
        <el-input v-model="form.colorProperty" placeholder="请输入颜色属性" :disabled="true" />
      </el-form-item> -->
        <!-- <el-form-item label="尺寸" prop="proTemplateSizeList">
                <el-checkbox-group v-model="checked" @change="test">
                    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id" :disabled="true">{{
                        item.label }}
                        </el-checkbox>
                    </el-checkbox-group>

                </el-form-item>
                <el-form-item label="logo图片" prop="logoUrl">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="right" width="auto">
                            <template #default>
                                <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                    style="object-fit: contain;width: 300px;height: 200px;">
                            </template>
                                                                                                    <template #reference>
                                                                                                        <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                style="object-fit: contain;width: 100px; height: 100px" />
                        </template>
                    </el-popover>
                </template>
            </el-form-item> -->
        <!-- //-----------新增或修改方法里上传图片 v-show="scope.row.logoUrl"-->
        <!-- <el-form-item label="logo图片" prop="logoUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                    :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                                                                                                                            :on-preview="handlePictureCardPreview" :file-list="fileList">
                                                                                                                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                                                                                                                    </el-upload>
                                                                                                                                                                                                                                                                                                                            <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                                                                                                                                                                <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                                                                                                                                                            </el-dialog>
                                                                                                                                                                                                                                                                                                                        </el-form-item> -->
        <!-- <el-form-item label="生产厂家代码" prop="manufacturerCode">
                                                                                            <el-input v-model="proTemplate.manufacturerCode" placeholder="请输入生产厂家代码" :disabled="true" />
                                                                                        </el-form-item> -->
        <el-form-item label="设计-特别呈现卖点" prop="designSpecialPresentation">
          <el-input v-model="form.designSpecialPresentation" placeholder="请输入设计-特别呈现卖点" type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }" :disabled="true" />
        </el-form-item>
        <el-form-item label="设计-运动强度" prop="designExerciseIntensity">
          <el-input v-model="form.designExerciseIntensity" placeholder="请输入设计-运动强度" :disabled="true" />
        </el-form-item>
        <el-form-item label="设计-面料功能" prop="designFabricFunction">
          <el-input v-model="form.designFabricFunction" placeholder="请输入设计-面料功能" :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="2"> <el-form-item></el-form-item></el-col>
      <el-col :span="8">
        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="客服-图片" prop="customerPicture">
          <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccessCustomer" :before-upload="beforeAvatarUpload"
                  :on-preview="handlePictureCardPreview" :file-list="fileLi" :on-change="changeFile2">
                <i class="el-icon-plus"></i>
        </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
          </el-dialog>
        </el-form-item> -->
        <el-form-item label="客服-图片" prop="customerPicture">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                                          :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                          :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
                                                                                                                                                          <i class="el-icon-plus"></i>
                                                                                                                                                      </el-upload>
                                                                                                                                                      <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                          <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                          </el-dialog> -->
          <el-upload ref="uploadcustomerPicture" :action="imgUpload.url" :headers="imgUpload.headers"
            list-type="picture-card" :on-change='changecustomerPicture' :file-list="filecustomerPicture" multiple
            :on-success="uploadcustomerPicture" :on-remove="RemovecustomerPicture">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handlecustomerPicture">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
          </div>
        </el-form-item>
        <!-- <el-form-item label="客服-图片" prop="customerPicture">
                                                                                                                                                                                                                                        <el-input v-model="proNewRelation.customerPicture" placeholder="后面完善" />
                                                                                                                                                                                                                                    </el-form-item> -->
        <el-form-item label="客服-卖点提炼" prop="customerSellingPoint">
          <el-input v-model="form.customerSellingPoint" placeholder="请输入客服-卖点提炼" type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
        <el-form-item label="客服-产品话术" prop="customerProductTalking">
          <el-input v-model="form.customerProductTalking" placeholder="请输入客服-产品话术" type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
        <el-form-item label="客服-强度/适合人群" prop="customerStrengthSuitable">
          <el-input v-model="form.customerStrengthSuitable" placeholder="请输入客服-强度/适合人群" type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
        <!-- <el-form-item label="客服-上架时间" prop="customPlanTime">
                  <el-date-picker clearable v-model="form.customPlanTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择客服-上架时间">
                  </el-date-picker>
                </el-form-item> -->
        <el-form-item label="尺码表" prop="keyword">
          <el-select v-model="keyword" placeholder="请选择尺码表" clearable @change="change">
            <el-option v-for="dict in keywordList" :key="dict.id" :label="dict.keyword" :value="dict.keyword" />
          </el-select>


        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 -->
        <el-form-item label="尺码表图片" prop="sizeUrl">
          <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccessAfter" :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview" :file-list="fileAfter" :disabled="true">
            <!-- <i class="el-icon-plus"></i> -->
          </el-upload>
        </el-form-item>
        <div class="footer" style=" text-align: center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel" style="margin-left: 30px;">返回上一级</el-button>
        </div>
      </el-col>



    </el-form>
  </div>
</template>

<script>
import { listAll } from "@/api/data/size";
import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";

import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
import { listCycle, getCycle, delCycle, addCycle, updateCycle, selectProFabricCycleByName } from "@/api/data/cycle";
// import { listData, getData, getDict, delData, addData, updateData } from "@/api/data/data";
import { listAttributes, getAttributes, delAttributes, addAttributes, updateAttributes } from "@/api/data/attributes";
// import { listFabric, getInfoByName, selectFabricNameList } from "@/api/data/Fabric";
// import { download } from "@/utils/request";
// import { listSecondry, getSecondry, delSecondry, addSecondry, updateSecondry } from "@/api/product/secondry";
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, addTemplateAndSecondry, addProNoColorSize } from "@/api/product/template";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Template_edit",
  dicts: ['sys_product_qudao', 'sys_product_size', 'sys_product_design', 'sys_product_scene', 'sys_product_coder', 'sys_product_yf', 'sys_product_cycle', 'sys_product_pl'],
  // dicts: [],
  data() {
    return {
      sizeUrl: '',
      fileAfter: [],
      //
      keyword: '',
      keywordList: [],

      //客服图片
      customerPicture: '',
      filecustomerPicture: [],
      // defaultDictType: '',
      form: {},
      // 表单参数
      f: {
        colorProperty: [
          { value: '' }
        ]
      },
      // dicts: ['sys_product_design'],
      openadd: false,
      checked: [],
      Visible: false,
      //产品导入
      dialogVisible: false,
      files: [],
      Upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/product/secondry/importTemplateSecondry",
      },



      //一级类目
      firstList: [],


      //面料名称
      mianliao: [],
      //胸垫/裤裆
      kudang: [],
      //衣长/裤长
      yichang: [],
      //版型
      banxing: [],
      //属性类别
      shuxing: [],
      //体形
      attributesList: [],
      // 聚拢程度
      julong: [],
      //防震程度/腰高
      yaogao: [],



      pjtUrl: process.env.VUE_APP_BASE_API,
      file: '',
      // fileLi: [{ url: "" }],
      fileLi: [],

      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      //logo相对路径
      logoUrl: '',
      //页面上存的暂时logo图片地址List
      // fileList: [{ url: "" }],
      fileList: [],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品一级信息表格数据
      templateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        logoPosition: null,
        purchasingReportAttachments: null,
        // dictType: undefined,
      },

      // 表单校验
      rules: {
        // productNo: [
        //   { required: true, message: "货号不能为空", trigger: "blur" }
        // ],
        // colorProperty: [
        //   { required: true, message: "颜色不能为空", trigger: "blur" }
        // ],
        // manufacturerCode: [
        //   { required: true, message: "生产厂家代码不能为空", trigger: "blur" }
        // ],
        // firstLevelColumn: [
        //   { required: true, message: "一级栏目不能为空", trigger: "blur" }
        // ],
        // secondLevelColumn: [
        //   { required: true, message: "二级栏目不能为空", trigger: "blur" }
        // ],
      }
    };
  },
  created() {
    // const dictId = 24
    // this.getType(dictId);
    // this.getTypeList();
    // this.getList();
    // this.getFirst()
    this.handleUpdate()
  },
  methods: {
    /** 查询字典类型详细 */
    // getType(dictId) {
    //   getType(dictId).then(response => {
    //     console.log(JSON.stringify(response.data));
    //     this.defaultDictType = response.data.dictType
    //     // this.queryParams.dictType = response.data.dictType;
    //     // this.defaultDictType = response.data.dictType;
    //     // this.getList();
    //   });
    // },
    changesecond(val) {
      console.log(JSON.stringify(val));
      listData({ dictType: 'sys_product_cycle', dictLabel: val }).then(response => {
        // this.dataList = ;
        console.log(JSON.stringify(response.rows.dictValue));

        this.form.workshopCycle = response.rows[0].dictValue
        console.log(JSON.stringify(response.rows));
        // this.total = response.total;
        // this.loading = false;
      });
    },
    // 删除
    removeDomain(item) {
      var index = this.f.colorProperty.indexOf(item);
      if (index == "0") {
        // 还有一个的时候提示不能删除
        this.$message({
          message: "不能删除了",
          type: "error",
        });
        return false;
      }
      if (index !== -1 && index !== "0") {
        this.f.colorProperty.splice(index, 1);
      }
    },
    // 表单新增
    addDomain() {
      this.f.colorProperty.push({
        value: "",
        // key: Date.now()+,
      })

    },
    test(val) {
      console.log(val);
      console.log(this.checked);
      let label = []
      // this.checked = val;
      // this.checkList.forEach(item => {
      //   this.checked.forEach(j => {
      //     if (item.id == j) {
      //       // console.log(item.label);
      //       label.push({ size: item.label })
      //     }

      //   })

      // })
      this.checked.forEach(item => {
        label.push({ size: item })
      })
      if (label == null) {
        this.$modal.msgError('请选择至少一个尺寸！')
        return
      }
      console.log(JSON.stringify(label))
      this.f.proTemplateSizeList = label


      this.$forceUpdate()

    }
    ,
    //批量上新
    chatNew(row) {

      this.Visible = true;

    },
    canNew() {
      this.Visible = false;
    },
    submitNew() {


      // return
      if (this.f.proTemplateSizeList == null) {
        this.$modal.msgError('请选择至少一个尺寸！')
        return
      }

      let label = []
      this.f.colorProperty.forEach(item => {
        if (label.indexOf(item.value) == -1) {
          label.push(item.value)
        }

      })
      this.f.colorProperty = label
      console.log(JSON.stringify(this.f.colorProperty));
      this.$refs["f"].validate(valid => {
        if (valid) {
          if (this.f.id != null) {
            updateSecondry(this.f).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.Visible = false;
              this.getList();
            });
          } else {

            addProNoColorSize(this.f).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                Object.assign(this.$data, this.$options.data())
                this.getList();
                // this.f.colorProperty = []
                this.Visible = false;



              }



            });
            Object.assign(this.$data, this.$options.data())
            this.Visible = false
            this.getList();

          }
        }
      });

    },


    //el-dialog关闭
    handleClose() {
      // Object.assign(this.$data, this.$options.data())
      this.$data = this.$options.data();
    },

    //获取一级类目
    // getFirst() {
    //   getDict('sys_product_first').then(res => {
    //     // console.log(JSON.stringify(res));
    //     this.firstList = res.data
    //   })

    // },
    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.handleUpdate(row)
    },
    //changeFirst 改变一级类目
    changeFirst(val) {
      console.log(val);
      this.form.firstLevelColumn = val
      this.get()
      this.getdesignPropertyCategory()
      this.getdesignFitCup()
      this.getyichang()
      this.getkudang()
      this.getjulong()
      this.getyaogao()

    },
    change(val) {
      console.log(val);
      listAll({ firstLevelColumn: this.form.firstLevelColumn, keyword: val }).then(res => {
        console.log(JSON.stringify(res));
        this.form.customSizeUrl = res.rows[0].sizeUrl
        this.fileAfter = [
          { url: process.env.VUE_APP_BASE_API + res.rows[0].sizeUrl }]
      })

    },
    downLoadFile(value) {
      console.log(JSON.stringify(value));
      if (!value) {
        this.$modal.msgError('该货号没有上传附件，请选择至少一个文件！')
        return

      }

      window.location.href = this.pjtUrl + value;

      // download.resource(value)
      //根据文件路径参数，按斜杠进行分割，取得文件名，这是download函数需要的第三个参数
      let list = value.split("/");
      let fileName = list[list.length - 1];
      //这是文件路径参数，因为download函数需要传三个参数，这是第二个参数
      let params = {
        resource: value
      }
      /** request里面的download下载函数 */
      //download函数是若依自带的，第一个参数是请求的url路径，不需要变，这个路径下的controller后台方法也是若依写好封装好了的。
      // download("/common/download/resource", params, fileName);
      // console.log("文件名");
      // console.log("value");
    },
    formatData(row) {
      let rowPerson = (row && row.colorPropertyList) || [];
      let arr = [];
      rowPerson.forEach(item => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item);
      });
      //
      return arr.join("/");
    },
    /**二级配置跳转**/
    go(row) {
      // console.log(row.id);
      this.$router.push({ path: '/product/secondry', query: { id: row.id } })
    },


    /** 查询产品一级信息列表 */
    getList() {
      this.loading = true;
      listTemplate(this.queryParams).then(response => {
        this.templateList = response.rows;
        console.log(JSON.stringify(this.templateList));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.$router.go(-1)
      return
      this.openadd = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.fileList = undefined
      this.form = {
        id: null,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        logoPosition: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.fileList = undefined
      // this.$refs.logoPosition.uploadFiles = [];
      // this.$refs.logoPosition.clearFiles();
      // this.$refs.purchasingReportAttachments.clearFiles();
      this.reset();
      this.openadd = true;
      this.title = "添加产品货号信息";
    },
    get() {
      console.log(JSON.stringify(this.form.firstLevelColumn));
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '体型/胸型' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        this.attributesList = response.rows;
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });

    },
    getdesignPropertyCategory() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '属性类别' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.shuxing = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    getdesignFitCup() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '版型' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.banxing = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    getyichang() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '衣长/裤长' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.yichang = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    //裤裆
    getkudang() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '胸垫/裤裆' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.kudang = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 聚拢程度
    getjulong() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '聚拢程度' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.julong = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 防震程度/腰高
    getyaogao() {
      this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '防震程度/腰高' }
      this.loading = true;
      listAttributes(this.queryParam).then(response => {
        // this.attributesList = response.rows;
        this.yaogao = response.rows
        console.log(JSON.stringify(response.rows));
        this.total = response.total;
        this.loading = false;
      });
    },
    //面料名称
    getmianliao() {
      this.loading = true;
      listAll().then(response => {
        console.log(JSON.stringify(response));
        this.keywordList = response.rows;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      // const id = row.id || this.ids
      const id = this.$route.query.id
      if (!id) {
        this.$modal.msgError('请点击左侧菜单-客服话术库进入')
        return
      }
      getTemplate(id).then(response => {
        this.logoUrl = response.data.logoPosition
        this.file = response.data.purchasingReportAttachments
        // this.fileLi = [
        //   { url: process.env.VUE_APP_BASE_API + response.data.purchasingReportAttachments }]//logo图片加的是这一行
        this.fileList = response.data.logoPosition ? [
          { url: process.env.VUE_APP_BASE_API + response.data.logoPosition }] : []//logo图片加的是这一行

        this.form = response.data;
        //防震程度/腰高
        // this.getyaogao()
        // // 聚拢程度
        // this.getjulong()
        // //体形
        // this.get()
        // //属性类别
        // this.getdesignPropertyCategory()
        // //版型/罩杯
        // this.getdesignFitCup()
        // //衣长/裤长
        // this.getyichang()
        // //胸垫/裤
        // this.getkudang()
        // //面料名称
        this.getmianliao()
        console.log(JSON.stringify(this.form));
        this.open = true;
        this.title = "修改产品货号信息";
        //图片回显
        this.customerPicture = response.data.customerPicture
        this.filecustomerPicture = response.data.customerPicture ? [
          { url: process.env.VUE_APP_BASE_API + response.data.customerPicture }] : []//logo图片加的是这一行
        this.fileAfter = response.data.customSizeUrl ? [
          { url: process.env.VUE_APP_BASE_API + response.data.customSizeUrl }] : []//logo图片加的是这一行

      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.customerPicture = this.customerPicture
      // this.form.sizeUrl = this.sizeUrl
      // this.form.purchasingReportAttachments = this.file
      // this.form.logoPosition = this.logoUrl; // 注：重要(用于添加到数据库)，加的是这一行
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTemplate(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.handleUpdate();
            });
          } else {
            addTemplate(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openadd = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除产品货号信息编号为"' + ids + '"的数据项？').then(function () {
        return delTemplate(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/template/export', {
        ...this.queryParams
      }, `template_${new Date().getTime()}.xlsx`)
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 20;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!');
      }
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccessCustomer(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.customerPicture = file.response.fileName;
      console.log(JSON.stringify(this.customerPicture));

    },

    handlePictureSuccessPic(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // // const url = file.response.fileName;
      // this.picurl = file.response.urle;
      this.file = file.response.fileName;
      console.log(this.file);

    },

    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      this.logoUrl = file.response.fileName;
      // this.handlePictureCardPreview()
      // // console.log(JSON.stringify(url));
      // this.$refs.logoPosition.clearFiles();
    },
    handlePictureSuccessDaoru(res, file) {
      // = file.response.url;
      // console.log(JSON.stringify(this.file));
      if (res.code == 200) {
        this.$modal.msgSuccess('导入成功')
        this.dialogVisible = false
        this.getList();
        return true
      } else {
        this.$modal.msgError(res.msg);
        this.dialogVisible = true
        // this.$message.msgError('该颜色未在字典定义')
        return
      }


    },
    //图片上传成功后的回调
    handlePictureSuccessAfter(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.sizeUrl = file.response.fileName;
      console.log(JSON.stringify(this.sizeUrl));


    },
    //图片上传成功后的回调
    handlePictureSuccessCustomer(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.customerPicture = file.response.fileName;
      console.log(JSON.stringify(this.customerPicture));

    },


    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    changeFile2(file, fileList) {
      if (fileList.length > 1) {
        this.fileAfter = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    //部门文件导入修改打开
    daoru() {
      this.dialogVisible = true
    },
    // 上传文件让第二次覆盖第一的文件
    changeFile3(file, fileList) {
      if (fileList.length > 1) {
        this.files = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },


    //handlecustomerPicture图片
    handlecustomerPicture(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filecustomerPicture.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return
      }
      this.$refs.uploadcustomerPicture.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadcustomerPicture.submit(); // 提交图片上传队列
    },
    //上传
    changecustomerPicture(file, fileList) {
      // this.fileList = fileList
      console.log('成功', file, fileList)
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filecustomerPicture = fileList.slice(-1);

      }
    },
    RemovecustomerPicture() {
      this.customerPicture = ''
    },

    uploadcustomerPicture(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.customerPicture = file.response.fileName

    },

  }
};
</script>
<!-- <style lang="scss">
.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}
</style> -->
<style lang="scss" scoped>
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
  cursor: pointer;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
  cursor: pointer;
}
</style>